<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 原生dom事件在html标签身上的使用 -->
    <button @click="test1(2, $event)">test1</button>

    <Event1 @click.native="test2"></Event1>

    <button @xxx="test3">test3</button>

    <Event2 @click="test4(5, 8, $event)" @xxx="test4"></Event2>
  </div>
</template>

<script type="text/ecmascript-6">
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

export default {
  name: "EventTest",

  components: {
    Event1,
    Event2,
  },

  methods: {
    test1(a, b) {
      console.log(b);
    },
    test2(event) {
      console.log(event.target.innerHTML);
    },
    test3(event) {
      console.log(event.target.innerHTML);
    },
    test4(event, v, c) {
      console.log(event, v, c);
    },
  },
};
</script>
